import { fileURLToPath, URL } from 'node:url';

import { defineConfig,loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';


//读取src下所有功能目录
import fs from "fs";
import path from "path";
import {copy,emptyDir} from "fs-extra";

//读取src下所有的目录，每个目录代表存在一个入口页面
const dirFiles = fs.readdirSync(path.join(__dirname,"/src"));
const inputFiles = {};
//src下有的目录不是一个独立的入口，比如静态资源文件目录asserts
const exernalInputFiles = ["assets"];
dirFiles.forEach((funName) => {
    if(exernalInputFiles.includes(funName)){
        return;
    }
    //默认所有目录的入口模板文件都是index.html
    inputFiles[funName] = `./src/${funName}/index.html`;
});


const outputFiles = {
    //生成的html、js是否压缩
    compact:true,
    //控制分包文件的文件名成，可以将具有相同特征的文件打包成一个文件
    manualChunks:((id) => {
        let funNamePrefix = "/src/";
        let funNameSuffix = "/component/";
        let pageSuffix = ".vue";
       
        //将引入的第三方资源合并
        if(id.includes("node_modules") 
            || id.includes("export-helper") 
            || id.includes("modulepreload-polyfill") 
            || id.includes("preload-helper")){
            return "vue-plugins";
        }else if(id.endsWith(pageSuffix) && id.includes(funNamePrefix) && id.includes(funNameSuffix)){
            //将同一个入口目录下的vue组件js打包成一个文件
            let begin = id.indexOf(funNamePrefix);
            let end = id.indexOf(funNameSuffix);
            let funName = id.substring(begin + funNamePrefix.length,end);
            return funName;
        }
    }),

    //分包引入文件
    chunkFileNames:((chunkInfo) => {
        if(chunkInfo.name === "vue-plugins"){
            return "assets/js/vue-plugins.js"
        } 
        return "[name]/static/js/[name]-module-[hash].js";
    }),
    //入口文件
    entryFileNames:"[name]/static/js/[name]-main-[hash].js",
    //静态文件
    assetFileNames:(chunkInfo) => {         
        if(chunkInfo.type === "asset" && /\.(jpe?g|png|gif|svg)$/i.test(chunkInfo.name)){
          return "assets/images/[name].[hash].[ext]"
        }else if(chunkInfo.type === "asset" && /\.(css)$/i.test(chunkInfo.name)){
          return "assets/css/[name].[hash].[ext]"
        }
    }
};

export default (({command,mode}) => {
    //获取环境变量
    //const env = loadEnv(mode,fileURLToPath(new URL("./env",import.meta.url)));    
    console.log("command",command);
    console.log("mode",mode);
    return defineConfig({
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
            }
        },
          //项目的根目录，后续的路径都是相对于此位置
        root:"./src",
        //方便打包后预览
        base:"./",
        plugins: [
            vue(),
            emptyDir("./dist"),
            copy("./public","./dist")     
        ],
    
        build:{
          //启用或者禁用css文件拆分
          cssCodeSplit: true,      
          //打包前是否清除目录文件内容，因为老是先执行拷贝，再执行清除，把拷贝的静态文件给清除掉，所以改换emptyDir和copy插件
          publicDir:"public",
          sourcemap: false,
    
          //编译的输出目录相对于根目录，默认相对于src目录
          outDir: "../dist", // 修改输出目录
     
          //图片转base64的阈值，小于1KB的图片将被转换成base64
          assetsInlineLimit: 1024,
    
          //使用terser构建后的文件体积更小          
          minify: "terser",
          terserOptions: {
              compress: {
                drop_console: true, // 生产环境移除console
              }
          },   
          target:[
              //兼容android9版本
              "es2015"
          ],       
         
          rollupOptions:{
              //不需要打包的组件，比如vue，可能是通过cdn方式引入的
              //external: ['vue', 'vue-router', 'axios'],
              input:inputFiles,
              output:outputFiles          
          }      
        },
    
        /**
         * npm install http-server -g
         * 然后在dist目录执行  http-server
         * 即可访问dist项目
         */
        server:{
          host:"localhost",
          cors:true,
          //服务启动时，自动打开浏览器
          open:true,
          port:8081,
          //如果端口被占，则继续尝试下一个
          strictPort:false,
          https:false
        }
    });
});
